<script setup>
	import { computed, ref } from "vue";
	import { pickupApi } from '@/apis/task.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	let taskId = ''
	onLoad(({ id }) => {
		taskId = id
	})

	// 1. 定义上传图片 data 变量
	// 回单凭证照片
	const receiveImgs = ref([])
	// 货品照片
	const goodsImgs = ref([])
	// 2. 表单兜底校验：true  禁用 ｜ false 启用
	const isBtnDisable = computed(() => {
		// 回单凭证照片 或 货品照片任意一个没有传图片，提交按钮就禁用
		return receiveImgs.value.length === 0 || goodsImgs.value.length === 0
	})
	// 3. 表单提交
	const submit = async () => {
		console.log('校验通过了！', receiveImgs.value, goodsImgs.value);
		/**
		 * 1.  调用接口实现提货
		 * 2.  跳会到任务详情页（查看提货信息）
		 */
		await pickupApi({
			id: taskId, // 任务 id
			cargoPickUpPictureList: receiveImgs.value.map(item => ({ url: item.url })), // 回单凭证照片
			cargoPictureList: goodsImgs.value.map(item => ({ url: item.url }))
		})
		uni.reLaunch({
			url: `/subpkg_task/detail/index?id=${taskId}`
		})
	}
</script>
<template>
	<view class="page-container">
		<view class="receipt-info">
			<!-- 
			 uni-file-picker 云上传组件=》可以通过它把照片自动上传到阿里云服务器
			 1. 通过v-model="变量"获取上传成功图片和回显
			 2. title 属性定义标题用于提示上传文件的内容
			 3. limit 限制上传文件的数量
			 4. file-extname 限制上传文件的类型
			 -->
			<uni-file-picker v-model="receiveImgs" file-extname="jpg,webp,gif,png" limit="3"
				title="请拍照上传回单凭证"></uni-file-picker>
			<uni-file-picker v-model="goodsImgs" file-extname="jpg,webp,gif,png" limit="3"
				title="请拍照上传货品照片"></uni-file-picker>
		</view>
		<button :disabled="isBtnDisable" @click="submit" class="button">提交</button>
	</view>
</template>

<style lang="scss" scoped>
	.page-container {
		padding: 30rpx;
	}

	.receipt-info {
		min-height: 600rpx;
		background-color: #fff;
		padding: 20rpx 30rpx;
		border-radius: 16rpx;

		::v-deep .uni-file-picker {
			margin-bottom: 30rpx;
		}
	}

	.button {
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		/* #ifdef APP */
		padding-top: 4rpx;
		/* #endif */
		border-radius: 100rpx;
		margin-top: 60rpx;
		color: #fff;
		font-size: $uni-font-size-big;
		background-color: $uni-primary;

		&[disabled],
		&.disabled {
			color: #fff;
			background-color: #fadcd9;
		}
	}
</style>